<template>
    <div class="account-set-manager-page">
        <el-card shadow="never" class="mt-4">
            <div class="mb-4">目前已开通{{ totalElements || 0 }}个管理者账号</div>
            <el-button type="primary" @click="onAddClick" v-if="isCompanyAdmin">配置管理者账号</el-button>
            <div class="mt-8" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="序号"  type="index"/>
                    <el-table-column label="姓名" prop="name"/>
                    <el-table-column label="身份" prop="identity"/>
                    <el-table-column label="职位" >
                        <template slot-scope="{row}">
                            {{ row.position | position(positionOptions) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="登录密码" prop="plain_psw"/>
                    <el-table-column label="邮箱" prop="account"/>
                    <el-table-column label="最后登陆时间">
                        <template slot-scope="{row}">
                            {{ row.last_visit_at | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="{row}">
                            {{ row.created_at | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}" v-if="isCompanyAdmin">
                            <el-button type="text" @click="onAddClick(row.id)">编辑</el-button>
                            <!-- <el-button type="text" @click="onDisableAccount(row.id)">冻结</el-button> -->
                            <el-button type="text" @click="onResetPwd(row.id)">重置密码</el-button>
                            <el-button type="text" @click="onDeleteClick(row.id)" class="red-color">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="!totalElements" class="footer">
                <el-pagination
                    class="center"
                    @current-change="fetchData"
                    :current-page.sync="form.page"
                    :page-size="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>

export default {
    components: {},
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 10,
            },
            totalElements: 0,

            positionOptions: [],
        };
    },
    computed: {
        isCompanyAdmin() {
            const my = this.$store.state.my;
            return my.type === 2 && !my.is_attached;
        },
    },
    filters: {
        position(id, option) {
            if (!id) return '';
            const list = option.filter(item => {
                if (item.id === +id) return item.name;
                return '';
            });

            const name = list.length ? list[0].name : '';
            return name;
        },
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('company_staff/page', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onAddClick(id) {
            const params = typeof id === 'number' || typeof id === 'string' ? {id} : undefined;
            this.$router.push({
                name: 'CompanySetManagerDetail',
                params,
            });
        },
        onDeleteClick(id) {
            this.confirmBox('是否删除此管理员帐号？', `company_staff/${id}`, '删除成功', 'delete');
        },

        onDisableAccount(id) {
            this.confirmBox('是否冻结此管理员帐号？', `company_staff/${id}`, '冻结成功', 'put');
        },

        onResetPwd(id) {
            this.confirmBox('是否重置此管理员帐号的密码？', `company_staff/change/${id}`, '重置成功', 'post', res => {
                this.confirmBox(`重置密码成功，新密码为：${res}`);
            });
        },

        confirmBox(tip, url, message, api, fn) {
            $ele.$confirm(tip, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                if (!url) return;
                this.loading = true;
                API[api](url).then(res => {
                    $ele.$message.success(message);
                    this.fetchData();
                    if (fn) fn(res);
                }).finally(() => this.loading = false);
            }).catch(() => { });
        },

        fetchPositionData() {
            API.get('position/list').then((res) => {
                this.positionOptions = res;
            });
        },
    },
    mounted() {
        this.fetchData();
        this.fetchPositionData();
    },
};
</script>

<style lang="scss">
.account-set-manager-page {
    .footer {
        height: 44px;
        background: #f7f7f7;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
}
</style>
